<template>
	<view class="page">
		<view class="list-item" v-for="(item,index) in users" :key="index" @click="connect(item)">
			<view class="avatar">
				<text class="round" v-if="item.read"></text>
				<image :src="item.avatar" mode="widthFix"></image>
			</view>
			<view class="content">
				<view class="title">
					<text class="name">{{ item.name }}</text>
					<text class="time">24/01/25</text>
				</view>
				<view class="txt">这是信息这是信息这是信息</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				users: [
					{avatar: 'https://pic.imgdb.cn/item/65f412419f345e8d03dd5a13.jpg', name: '云端遗梦录', read: 1},
					{avatar: 'https://pic.imgdb.cn/item/65f412709f345e8d03de5ddb.jpg', name: '我要月亮奔我而来', read: 1},
					{avatar: 'https://k.sinaimg.cn/n/sinakd20121/96/w2048h2048/20240118/9708-e48f9d9226e0a45ec9610b2eb3906a87.jpg/w700d1q75cms.jpg', name: '星河暗恋记', read: 1},
					{avatar: 'https://pic.imgdb.cn/item/65f412ff9f345e8d03e16e8e.jpg', name: '月野氿桃', read: 1},
					{avatar: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fa6808c4d-deac-4102-8fcb-0164b258ffe5%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1708585730&t=fb863f2b64845d0ae49091187f15f452', name: '星星跌入梦境', read: 1},
					{avatar: 'https://img1.baidu.com/it/u=4103620966,1336257185&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500', name: '桃奈叶子', read: 0},
					{avatar: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F0738d0c4-60bf-477f-a5b9-b78abf994cc9%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1708585786&t=656a85368566a4b0d2e9f64a6bb3d915', name: '知更鸟的死因', read: 0},
					{avatar: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F8075fa62-cf88-420a-88f7-9a4a4d714bb0%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1708585798&t=057782a24ac68de6a2671084fb40140a', name: '放鹤归舟', read: 0},
					{avatar: 'https://img0.baidu.com/it/u=3975753653,825915219&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500', name: '春日樱亭', read: 0},
					{avatar: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F034f80eb-432d-4e10-b5d8-c2327334c61b%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1708585807&t=398154a5d365a390dc5ee294c87cb018', name: '宇宙热恋期', read: 0},
					{avatar: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F4d69987e-5419-463c-890c-61f819bf4d22%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1708585819&t=21d504545be19a98f39f593ce59df064', name: '今夜星潮暗涌', read: 0},
					{avatar: 'https://img1.baidu.com/it/u=4103620966,1336257185&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500', name: '桃奈叶子', read: 0},
					{avatar: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F0738d0c4-60bf-477f-a5b9-b78abf994cc9%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1708585786&t=656a85368566a4b0d2e9f64a6bb3d915', name: '知更鸟的死因', read: 0},
					{avatar: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F8075fa62-cf88-420a-88f7-9a4a4d714bb0%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1708585798&t=057782a24ac68de6a2671084fb40140a', name: '放鹤归舟', read: 0},
					{avatar: 'https://img0.baidu.com/it/u=3975753653,825915219&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500', name: '春日樱亭', read: 0},
					{avatar: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F034f80eb-432d-4e10-b5d8-c2327334c61b%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1708585807&t=398154a5d365a390dc5ee294c87cb018', name: '宇宙热恋期', read: 0},
					{avatar: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F4d69987e-5419-463c-890c-61f819bf4d22%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1708585819&t=21d504545be19a98f39f593ce59df064', name: '今夜星潮暗涌', read: 0},
				]
			};
		},
		methods: {
			connect(item) {
				uni.navigateTo({
					url:`/pages/news/message?name=${item.name}&avatar=${item.avatar}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		padding: 0 32rpx;
		color: #333;
	}
	.list-item {
		display: flex;
		padding: 30rpx 0;
		border-bottom: 1px solid #f7f8f9;
		.avatar {
			width: 90rpx;
			height: 90rpx;
			border-radius: 10rpx;
			margin-right: 20rpx;
			position: relative;
			.round {
				position: absolute;
				width: 14rpx;
				height: 14rpx;
				border-radius: 50%;
				background: #ef5656;
				top: -4rpx;
				right: -4rpx;
				z-index: 1;
			}
			image {
				width: 100%;
				height: 100%;
				border-radius: 10rpx;
			}
		}
		.content {
			flex: 1;
			.title {
				display: flex;
				justify-content: space-between;
				.name {
					font-weight: bold;
				}
				.time {
					color: #999;
					font-size: 24rpx;
				}
			}
			.txt {
				margin-top: 10rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
				text-align: left;
				color: #999;
				font-size: 26rpx;
			}
		}
	}
	
	
	
	
	/**
	 * 这里是uni-app内置的常用样式变量
	 *
	 * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
	 * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
	 *
	 */
	
	/**
	 * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
	 *
	 * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
	 */
	
	/* 颜色变量 */
	@import "@/style/iconfont.wxss";
	// 颜色
	$color-title: #f0ad4e; // 主标题
	$color-sub: #333333; // 副标题 主色调调的颜色
	$color-subA: #fff; // 辅助标题 一般是灰色或者白色
	$color-tip: #999999; // 辅助提示色
	$color-bg: #f6f6f6; // 背景色
	$color-line: #eeeeee; //分割线
	$color-disabled: #cccccc; // 禁用色
	$color-btn: #ff5e0f; //按钮颜色
	$color-btnColor: #fff;
	$graycolor:#B3B3B3; //灰色
	//背景色
	$bg-sub: #F8F6F9; //灰色
	$color-red: #f63c32; //红色
	
	
	// 文字
	$font-size-base: 28rpx; // 14px，正文文字
	$font-size-toolbar: 32rpx; // 16px，用于导航栏、标题
	$font-size-sub: 26rpx; // 13px，副标题
	$font-size-tag: 24rpx; // 12px，辅助性文字/大标签
	$font-size-goods-tag: 22rpx; // 11px，商品列表角标
	$font-size-activity-tag: 20rpx; // 10px，活动角标（拼团等角标）/小标签文字
	
	$margin-both: 30rpx; //外边距 左右
	$margin-updown: 20rpx; // 外边距 上下
	$border-radius: 10rpx; //圆角
	$padding: 25rpx; //内边距
	
	/**
	 * 这里是uni-app内置的常用样式变量
	 *
	 * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
	 * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
	 *
	 */
	
	/**
	 * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
	 *
	 * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
	 */
	
	/* 颜色变量 */
	
	/* 行为相关颜色 */
	$uni-color-primary: #007aff;
	$uni-color-success: #4cd964;
	$uni-color-warning: #f0ad4e;
	$uni-color-error: #dd524d;
	
	/* 文字基本颜色 */
	$uni-text-color:#333;//基本色
	$uni-text-color-inverse:#fff;//反色
	$uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息
	$uni-text-color-placeholder: #808080;
	$uni-text-color-disable:#c0c0c0;
	
	/* 背景颜色 */
	$uni-bg-color:#ffffff;
	$uni-bg-color-grey:#f8f8f8;
	$uni-bg-color-hover:#f1f1f1;//点击状态颜色
	$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
	
	/* 边框颜色 */
	$uni-border-color:#c8c7cc;
	
	/* 尺寸变量 */
	
	/* 文字尺寸 */
	$uni-font-size-sm:12px;
	$uni-font-size-base:14px;
	$uni-font-size-lg:16;
	
	/* 图片尺寸 */
	$uni-img-size-sm:20px;
	$uni-img-size-base:26px;
	$uni-img-size-lg:40px;
	
	/* Border Radius */
	$uni-border-radius-sm: 2px;
	$uni-border-radius-base: 3px;
	$uni-border-radius-lg: 6px;
	$uni-border-radius-circle: 50%;
	
	/* 水平间距 */
	$uni-spacing-row-sm: 5px;
	$uni-spacing-row-base: 10px;
	$uni-spacing-row-lg: 15px;
	
	/* 垂直间距 */
	$uni-spacing-col-sm: 4px;
	$uni-spacing-col-base: 8px;
	$uni-spacing-col-lg: 12px;
	
	/* 透明度 */
	$uni-opacity-disabled: 0.3; // 组件禁用态的透明度
	
	/* 文章场景相关 */
	$uni-color-title: #2C405A; // 文章标题颜色
	$uni-font-size-title:20px;
	$uni-color-subtitle: #555555; // 二级标题颜色
	$uni-font-size-subtitle:26px;
	$uni-color-paragraph: #3F536E; // 文章段落颜色
	$uni-font-size-paragraph:15px;
	
	
	
	
	
	
	
	view {
		font-family: PingFangSC-Medium, PingFang SC;
	}
	text {
		font-family: PingFangSC-Medium, PingFang SC;
	}
	@mixin base($baseColor, $baseHelpColor) {
		$base-color: $baseColor;
		$base-help-color: $baseHelpColor; //辅助颜色
		.color_write{
			color: #fff;
		}
		.color-base-text {
			color: $base-color !important;
		}
		.color-fff-bg{
			background-color: $bg-sub;
		}
		.graycolor{
			color: $graycolor;
		}
		.color-red{
			color: $color-red;
		}
	
		//背景色
		.color-base-bg {
			background-color: $base-color !important;
		}
	
		// 商品详情加入购物车背景色
		.color-join-cart {
			background-color: $base-help-color !important;
		}
	
		// 浅主色调背景
		.color-base-bg-light {
			background-color: lighten($base-color, 35%) !important;
		}
	
		.color-base-text-before {
			&::after,
			&::before {
				color: $base-color !important;
			}
		}
	
		.color-base-bg-before {
			&::after,
			&::before {
				background: $base-color !important;
			}
		}
		.font-bold{
			font-weight: bold;
		}
		//边框
		.color-base-border {
			border-color: $base-color !important;
			&-top {
				border-top-color: $base-color !important;
			}
			&-bottom {
				border-bottom-color: $base-color !important;
			}
			&-right {
				border-right-color: $base-color !important;
			}
			&-left {
				border-left-color: $base-color !important;
			}
		}
		
		//按钮
		button {
			display: block;
			font-size: $font-size-base;
			border-radius: 40rpx;
			line-height: 2.5;
			background-color: $color-btn;
			color: $color-btnColor;
			-webkit-tap-highlight-color: rgba(0,0,0,0) !important;
			&[type='primary'] {
				width: 690rpx;
				height: 88rpx;
				background-color: $color-btn;
				opacity: 1;
				line-height: 88rpx;
				border-radius: 50rpx;
				margin: 0 auto;
				font-size: 28rpx;
				color: #fff;
				&[plain] {
					background-color: $color-btn;
					color: $color-btnColor;
				}
			}
			&[type='default'] {
				width: 324rpx;
				height: 80rpx;
				background: $color-btn;
				opacity: 1;
				line-height: 80rpx;
				border-radius: 50rpx;
				// margin: 0 auto;
				font-size: 28rpx;
				color: #fff;
			}
			&[type='mini'] {
				width: 168rpx;
				height: 76rpx;
				background: linear-gradient(90deg, #3EB8FF 0%, #BC44FF 100%);
				opacity: 1;
				line-height: 76rpx;
				border-radius: 50rpx;
				margin: 0 auto;
				font-size: 28rpx;
				color: #fff;
				&[type='default'] {
					background-color: $color-btn;
					color: $color-btnColor;
				}
			}
			&.button-hover[type='primary'] {
				background-color: $color-btn;
				color: $color-btnColor ;
				&[plain] {
					background-color: $color-btn;
					color: $color-btnColor ;
				}
			}
			&.button-hover[type='default'] {
				background-color: $color-btn;
				color: $color-btnColor ;
				&[plain] {
					background-color: $color-btn;
					color: $color-btnColor ;
				}
			}
	
			&[disabled],
			&.disabled {
				background: $color-btn !important;
				color: $color-btnColor !important;
				border-color: $color-btn !important;
			}
		}
	
		.flex_b {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.flex_end {
			display: flex;
			justify-content: flex-end;
			align-items: center;
		}
		.flex {
			display: flex;
			align-items: center;
		}
		.flex2{
			flex:2
		}
		
		.flex_c {
			// 上下分布的方法
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}
		.flex_center {
			// 上下分布的方法
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.flex_a {
			display: flex;
			align-items: center;
			justify-content: space-around;
		}
		.flex_e {
			display: flex;
			align-items: center;
			justify-content: space-evenly;
		}
		.bottom-mar {
			// 处理底部
			height: 30rpx;
			padding-bottom: env(safe-area-inset-bottom);
		}
		.white {
			color: #fff !important;
		}
		.click-none {
			// 禁止鼠标点击
			pointer-events: none;
		}
		.grey {
			// 灰色
			color: #acacac !important;
		}
		.f-t {
			// 主色调的颜色
			color: $color-sub;
		}
		.noneList {
			// 为空
			text-align: center;
			margin: 50rpx auto;
			font-size: 32rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #000;
		}
		.textC {
			text-align: center;
		}
		// 底部定位
		.bomPosition {
			position: fixed;
			bottom: 30rpx;
			padding-bottom: env(safe-area-inset-bottom);
			width: 750rpx;
		}
		.modelBox {
			// 常用的盒子
			width: 668rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 25rpx;
			margin: 25rpx auto;
		}
		.shiming {
			line-height: 32rpx;
			background-color: rgba(69, 139, 200, 0.8);
			border-radius: 10rpx;
			font-size: 22rpx;
			color: #fff;
			padding: 0 10rpx;
		}
	}
	
</style>

